<template>
	<div class="live-calendar-box">
		<HeaderCom :title="'直播日历'" :rightTitle="'我的预约'" @right="myOrder"></HeaderCom>
        <ul class="main-box" ref="liveCalendar">
            <li class="item" v-for="(item,i) in previtewList" :key="i" @click="goToLive(item.roomId)">
                <p class="time-box">
                    <i></i>
                    <span>{{item.beginTime}}</span>
                </p>
                <div class="img-box">
                    <img :src="item.imagUrl" alt="">
                    <LiveStatus :status="item.roomStatus"></LiveStatus>
                </div>
                <div class="title-box">
                    <div>
                        <h4>{{item.title}}</h4>
                        <h5>{{item.intro}}</h5>
                    </div>
                    <p class="order-box" v-if="item.isOrder"><i class="iconfont iconjiahao"></i><span>预约直播</span></p>
                </div>
            </li>
          
    
        </ul>
	</div>
</template>

<script>
	import HeaderCom from './components/headerCom';//搜索组件
    import LiveStatus from './components/liveStatus';//直播状态
		export default {
		components: {
			HeaderCom,
            LiveStatus,
		},
		data() {
			return {
                previtewList:[]
            
			}
		},
		computed: {

		},
		created() {
              this.$store.dispatch("hideNav");
		},
		mounted: function() {
          this.previtewList = JSON.parse(sessionStorage.getItem("previewList"));
		},
		methods: {
            myOrder(){
                // 我的预约
                this.$router.push({
		             path: `/${this.$channel}/myOrder`,
		         });
            },
            // 直播页面
             goToLive(roomId) {
             this.$router.push(`/${this.$channel}/liveRoom/${roomId}?dzhPage=true`);
             window.sessionStorage.setItem('calendarPosition',this.$refs.liveCalendar.scrollTop)
			},
		},
        watch:{
            '$route'(to,from){
                if(to.path=='/zhxyk/liveCalendar' && from.path.indexOf('/zhxyk/liveRoom')!='-1'){
                    this.$refs.liveCalendar.scrollTop = window.sessionStorage.getItem('calendarPosition')
                }  
            }
        }
	}
</script>


<style scoped="scoped">
	.live-calendar-box{
		width: 100vw;
		height: 100vh;
		background: white;	
	}
    .main-box{
        height: calc(100vh - 88px);
        padding-top: 40px;
        width: 100vw;
        overflow-y: scroll;
    }
    .item{
        padding-bottom: 24px;
        padding-left: 30px;
        padding-right: 19px;
         margin-bottom: 49px;
        border-bottom: 6px solid #F7F7F7;
    }
    .item:last-child{
        border-bottom: none;
    }
    .time-box{
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .time-box i{
        width: 40px;
        height: 40px;
        margin-right: 16px;
        background:url('../assets/images/zhxyk/home/calendar.png') no-repeat;
        background-size: 100% 100%;
    }
    .time-box span{
        font-size: 30px;
        font-weight: 400;
        color: #666666;
        letter-spacing: 1px;
     }
     .img-box{
        position: relative;
     }
     .img-box .live-status-box{
         position: absolute;
         right: 30px;
         top: 30px;
     }
     .img-box img{
         height: 390px;
         width: 100%;
         margin-bottom: 18px;
         border-radius: 10px;
     }
     .title-box{
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
     }
     .title-box h4{
         margin-bottom: 10px;
         font-size: 30px;
         font-weight: 400;
         color: #333333;
         letter-spacing: 1px;
     }
     .title-box h5{
        font-size: 28px;
        font-weight: 400;
        color: #ACACAC;
        letter-spacing: 1px;
     }
     .order-box{
        display: flex;
        align-items: center;
        padding: 3px 14px;
        background: rgba(26, 144, 255, 0.1);
        border-radius: 8px;
        border: 1px solid #40A9FF;
        font-size: 30px;
        font-weight: 400;
        color: #40A9FF;
        line-height: 42px;
     }
     .order-box i{
         font-size: 42px;
     }
     .live-calendar-box >>> .live-status-box p span{
         padding-top: 8px;
         padding-bottom: 6px;
     }
</style>